<template>
	<view class="mainbgc">
		<view class="content">
			<u-swiper :list="list4" keyName="url" radius="0" @change="e => currentNum = e.current" :autoplay="true"
				height="450rpx" v-if="type==0" indicator indicatorMode="line" circular indicatorStyle="right: 20px"
				@click="previewimg(index,list4)">
				<view slot="indicator" class="indicator-num">
					<text class="indicator-num__text"
						style="color: #fff;">{{ currentNum + 1 }}/{{ list4.length }}</text>
				</view>
			</u-swiper>
			<u-swiper :list="dataAll.video_url_text" keyName="url" :autoplay="true" height="450rpx" v-if="type==1">
			</u-swiper>
			<view class="centertop flexbetween" @click="changetype" v-if="dataAll.video_url_text.length">
				<view :class="type==0?'HCA':'viddeo'">企业图片</view>
				<view :class="type==1?'HCA':'viddeo'">企业视频</view>
			</view>
			<view class="all">
				<view class="header">
					<view class="header_center flexstart ">
						<image :src="dataAll.user.avatar_text" mode="" class="header_che"></image>
						<view class="header_right">
							<view class="header_henan">{{dataAll.gsmc}}</view>
							<view class="flexleft header_three">
								<view class="header_VIP" v-if="dataAll.user.vip_status">VIP认证</view>
								<view class="header_gs" v-if="dataAll.user.qy_status==1">企业认证</view>
								<view class="header_gs" v-if="dataAll.user.qy_status==2">工商认证</view>
								<view class="header_pt" v-if="dataAll.user.platform_status==1">平台认证</view>
							</view>
							<view class="hui">浏览量{{dataAll.views}}</view>
						</view>
					</view>
				</view>
				<!-- 物流线路 -->
				<view class="border  ffffff">
					<view class="wuliu" v-for="item in dataAll.zxlist" :key="item.id">
						<view class="text_weight">物流线路</view>
						<view class="flexleft margin_top">
							<view class="border_zhida" v-if="item.sfzz_status==0">直达</view>
							<view class="border_zhongzhuan" v-if="item.sfzz_status==1">中转</view>
							<view class="henan" style="max-width: 200rpx;">{{item.sfcityinfo}}</view>
							<view class="huoche"></view>
							<view class="beijing" style="max-width: 200rpx;">{{item.ddcityinfo}}</view>
						</view>
						<view class="hui margin_top">描述：{{item.des}}</view>
					</view>
				</view>
				<!-- 公司信息 -->
				<view class=" ffffff margin_top border">
					<view class="wuliu">
						<view class="text_weight">公司信息</view>
						<view class="flexbetween margin_top">
							<view class="hui gongsi flex_wrap">
								{{dataAll.cityinfo}}{{dataAll.address}}
								<text class="word_bluer">据您{{kmUnit(Number(dataAll.distance))}}</text>
							</view>
							<view class="locations" @click="openmapone(dataAll)"></view>
						</view>
					</view>
					<view class="wuliu" v-for="item in dataAll.shop.shoplx" :key="item.id">
						<view class="Contact">{{item.name}}</view>
						<view class="flexbetween">
							<view class="hui flex_wrap">{{item.mobile}}</view>
							<view class="phone" @click="phone(item.mobile)"></view>
						</view>
					</view>
				</view>
				<!-- 其他网点 -->
				<!-- <view class=" ffffff margin_top border">
					<view class="wuliu">
						<view class="text_weight">其他网点</view>
					</view>
					<view v-for="item in dataAll.zxaddress" :key="item.id">
						<view class="wuliu">
							<view class="flexbetween margin_top">
								<view class="hui gongsi flex_wrap">
									{{item.address}}
								</view>
								<view class="locations" @click="openmaptwo(item)"></view>
							</view>
						</view>
						<view class="wuliu" v-for="ite in item.lxr" :key="ite">
							<view class="Contact">{{ite.name}}</view>
							<view class="flexbetween">
								<view class="hui flex_wrap">{{ite.mobile}}</view>
								<view class="phone" @click="phone(ite.mobile)"></view>
							</view>
						</view>
					</view>
				</view> -->
				<!-- 公司官网-->
				<view class="mainpadding ffffff margin_top border">
					<view class="text_weight">公司官网</view>
					<view class="zi margin_top">{{dataAll.user.shop_apply.shop_url}}</view>
				</view>
				<!-- 公司详情 -->
				<view class="mainpadding ffffff margin_top border">
					<view class="text_weight">公司详情</view>
					<view class="zi margin_top">{{dataAll.qyxq}}</view>
				</view>
				<!-- 公司介绍 -->
				<view class="jieshao ffffff margin_top border">
					<view class="text_weight">公司介绍</view>
					<view class="zi margin_top">
						<image :src="item" mode="" class="gs_img" v-for="(item,index) in list4" :key="item"
							@click="previewimg(index,list4)"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- footer -->
		<view class="footer flexbetween">
			<view class="flexleft">
				<view class="" @click="shareadd">
					<button open-type="share" class="footer_stars">
						<view class="share"></view>
						<view class=" share_zi">分享</view>
					</button>
				</view>
				<view class="footer_star" @click="collect">
					<!-- 已收藏 图片-->
					<view class="collect_star flexcolumn" v-show="dataAll.is_collect"></view>
					<view class="star flexcolumn " v-show="!dataAll.is_collect"></view>
					<view class="collect">收藏</view>
				</view>
			</view>
			<view class="flexleft footer_right" @click="phone(dataAll.user.mobile)">
				<view class="phones">拨打电话</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				type: 0,
				listid: "",
				dataAll: {
					video_url_text:[]
				},
				list4: [],
				lat: "",
				lng: "",
				is_login: true,
				currentNum: 0
			}
		},
		onLoad(options) {
			this.listid = options.id
			this.getlocation()
		},
		onShow() {
			let _this = this
			if (!httpRequest.checkIsLogin()) {
				_this.is_login = false
			}
		},
		methods: {
			previewimg(index, arr) {
				let i = arr; //获取当前页面的轮播图数据
				//uniapp预览轮播图
				uni.previewImage({
					current: index, //预览图片的下标
					urls: i //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			openmapone(item) {
				uni.openLocation({
					latitude: Number(item.latitude), //即将传到高德或腾讯地图的终点纬度  必须是数值，字符串无效
					longitude: Number(item.longitude), //即将传到高德或腾讯地图的终点经度  必须是数值，字符串无效
					name: item.shop_name, //即将传到高德或腾讯地图的店铺名称
					address: item.cityinfo + item.address, //即将传到高德或腾讯地图的详细地址
					scale: 18
				})
			},
			openmaptwo(item) {
				uni.openLocation({
					latitude: Number(item.latitude), //即将传到高德或腾讯地图的终点纬度  必须是数值，字符串无效
					longitude: Number(item.longitude), //即将传到高德或腾讯地图的终点经度  必须是数值，字符串无效
					name: item.address, //即将传到高德或腾讯地图的店铺名称
					address: item.address, //即将传到高德或腾讯地图的详细地址
					scale: 18
				})
			},
			kmUnit(m) {
				var v;
				if (typeof m === 'number' && !isNaN(m)) {
					if (m >= 1000) {
						v = (m / 1000).toFixed(2) + 'km'
					} else {
						v = m + 'm'
					}
				} else {
					v = '0m'
				}
				return v;
			},
			getlocation() {
				let _this = this
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success: function(res) {
						//逆地址解析  坐标转地址信息
						_this.lat = res.latitude
						_this.lng = res.longitude
						_this.getdetail()
					}
				});
			},
			getdetail() {
				let _this=this;
				httpRequest.request('/api/Company/detail', 'GET', {
					id: this.listid || 3,
					lat: this.lat,
					lng: this.lng
				}, false, false, true).then(res => {
					if (res.code == 1) {
						let arr = []
						let arr2 = []
						let zx = res.data
						// if (zx.bgs_image_text != "") {
						// 	arr.push(zx.bgs_image_text)
						// }
						// if (zx.ck_image_text != "") {
						// 	arr.push(zx.ck_image_text)
						// }
						// if (zx.fgs2_image_text != "") {
						// 	arr.push(zx.fgs2_image_text)
						// }
						// if (zx.fgs1_image_text != "") {
						// 	arr.push(zx.fgs1_image_text)
						// }
						// if (zx.qt_image_text != "") {
						// 	arr.push(zx.qt_image_text)
						// }
						console.log(zx,222222222)
						if (zx['images_text'].length != 0) {
							arr = zx.images_text
						}
						
						zx.video_url_text = zx.video_url_text ? [zx.video_url_text] : [],
						// arr.forEach(item=>{
						// 	item.forEach(current=>{
						// 		arr2.push(current)
						// 	})
						// })
						_this.list4 = arr
						_this.dataAll = res.data
					}
				})
			},
			shareadd() {
				httpRequest.request('/api/zx/addZXListShareNum', 'GET', {
					id: this.listid,
				}, false, false, true).then(res => {})
			},
			onShareAppMessage() {
				return {
					title: this.dataAll.shop.shop_name,
					path: "pages/index/zhuye?id=" + this.listid + "&invite_code=" + uni.getStorageSync(
						"invite_code"),
				}
			},
			collect() {
				httpRequest.request('/api/Company/addCollect', 'GET', {
					id: this.dataAll.shop.id,
				}, false, false, true).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						this.getdetail()
					}
				})
			},
			phone(p) {
				this.addboda()
				uni.makePhoneCall({
					phoneNumber: p.toString()
				}).catch((e) => {})
			},
			addboda() {
				httpRequest.request('/api/zx/addZXListCallNum', 'GET', {
					id: this.listid,
				}, false, false, true).then(res => {})
			},
			changetype() {
				this.type = this.type == 0 ? 1 : 0
			},

		}
	}
</script>

<style lang="scss" scoped>
	.background {
		width: 100%;
		height: 437rpx;
		background-size: 100% 100%;
	}

	.content {
		padding-bottom: 200rpx;
	}

	.wuliu {
		padding: 30rpx 30rpx;
		border-bottom: 1rpx solid RGBA(247, 247, 247, 1);
		padding-bottom: 30rpx;
	}

	.Contact {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.jieshao {
		padding: 21rpx 30rpx 70rpx 30rpx;
	}

	.footer_right {
		padding-right: 46rpx;
	}

	.gs_img {
		width: 642rpx;
		height: 248rpx;
		background-size: 100% 100%;
		padding-bottom: 30rpx;
	}

	.footer_stars {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

	}

	.footer_star {
		padding-left: 66rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.phones {
		background: #228DFF;
		border-radius: 13rpx 13rpx 13rpx 13rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
		padding: 21rpx 42rpx 21rpx 43rpx;
	}

	.mainpadding {
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.all {
		padding: 30rpx 24rpx;
	}

	.zi {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.border_zhida {
		margin-right: 12rpx;
	}

	.header {
		padding-bottom: 30rpx;
	}

	.gongsi {
		width: 500rpx;
	}

	.henan {
		margin-right: 22rpx;
	}

	.beijing {
		margin-left: 15rpx;
	}

	.word_bluer {
		margin-left: 20rpx;

	}

	.centertop {
		position: absolute;
		top: 320rpx;
		left: 24rpx;
		width: 300rpx;
		background: rgba(0, 0, 0, 0.3);
		border-radius: 42rpx 42rpx 42rpx 42rpx;

		.HCA {
			width: 150rpx;
			font-size: 20rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #228DFF;
			padding: 8rpx 20rpx 8rpx 30rpx;
			background: #FFFFFF;
			text-align: center;
			border-radius: 42rpx 42rpx 42rpx 42rpx;
			// position: relative;
			// left: 15rpx;
			box-sizing: border-box;
		}

		.viddeo {
			width: 150rpx;
			font-size: 20rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #fff;
			text-align: center;
			padding: 8rpx 20rpx 8rpx 30rpx;
			border-radius: 42rpx 42rpx 42rpx 42rpx;
			box-sizing: border-box;
		}
	}

	.header_center {
		padding: 30rpx 30rpx;
		background-color: #fff;
	}

	.header_right {
		padding-left: 19rpx;

		.header_henan {
			font-size: 30rpx;
			font-family: PingFang SC-Heavy, PingFang SC;
			font-weight: 800;
			color: #000000;
		}

		.header_three {
			margin-top: 20rpx;
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;

			.header_VIP {
				color: #FFA500;
				padding: 4rpx 16rpx 4rpx 16rpx;
				background: RGBA(255, 246, 230, 1);
				border-radius: 27rpx 27rpx 27rpx 27rpx;
				margin-right: 30rpx;
			}

			.header_gs {
				color: #228DFF;
				padding: 4rpx 16rpx 4rpx 16rpx;
				background: RGBA(233, 244, 255, 1);
				border-radius: 27rpx 27rpx 27rpx 27rpx;
				margin-right: 30rpx;
			}

			.header_pt {
				color: #FD463E;
				padding: 4rpx 16rpx 4rpx 16rpx;
				background: RGBA(255, 237, 236, 1);
				border-radius: 27rpx 27rpx 27rpx 27rpx;
				margin-right: 30rpx;
			}
		}

		.hui {
			margin-top: 15rpx;
		}
	}

	.header_che {
		width: 132rpx;
		height: 132rpx;
		background-size: 100% 100%;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}

	.footer {
		width: 100%;
		box-sizing: border-box;
		position: fixed;
		bottom: 0rpx;
		background-color: #fff;
		padding: 30rpx 46rpx;
		padding-bottom: 57rpx;
	}

	.collect {
		margin-top: 13rpx;
	}

	.share_zi {
		margin-top: 13rpx;
	}
</style>